{% extends "base.html" %}

{% block title %}文章列表 - 我的博客{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-800 mb-4">最新文章</h1>
    
    <!-- 标签筛选 -->
    {% if tags %}
    <div class="mb-6">
        <div class="flex flex-wrap gap-2">
            <a href="{{ url_for('index') }}" 
               class="px-3 py-1 rounded-full text-sm {% if not selected_tag %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}">
                全部
            </a>
            {% for tag in tags %}
            <a href="{{ url_for('index', tag=tag) }}" 
               class="px-3 py-1 rounded-full text-sm {% if tag == selected_tag %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}">
                {{ tag }}
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<!-- 文章列表 -->
{% if posts %}
<div class="space-y-6">
    {% for post in posts %}
    <article class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow">
        <h2 class="text-xl font-semibold mb-2">
            <a href="{{ url_for('post_detail', post_id=post.id) }}" class="text-gray-800 hover:text-blue-600">
                {{ post.title }}
            </a>
        </h2>
        
        <div class="flex items-center text-sm text-gray-500 mb-3">
            <span>{{ post.created_at[:10] }}</span>
            {% if post.tags %}
            <span class="mx-2">•</span>
            <div class="flex gap-2">
                {% for tag in post.tags %}
                <span class="bg-gray-100 px-2 py-1 rounded text-xs">{{ tag }}</span>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        
        <p class="text-gray-600 line-clamp-2">
            {{ post.content[:150] }}...
        </p>
        
        <div class="mt-4">
            <a href="{{ url_for('post_detail', post_id=post.id) }}" 
               class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                阅读全文 →
            </a>
        </div>
    </article>
    {% endfor %}
</div>
{% else %}
<div class="text-center py-12">
    <div class="text-gray-400 text-lg mb-4">暂无文章</div>
    <a href="{{ url_for('new_post') }}" class="text-blue-600 hover:text-blue-800">
        开始写第一篇文章 →
    </a>
</div>
{% endif %}
{% endblock %}
